<template>
  <div class="register">
    <div class="registerHeader" @click="toLogin">
      <van-icon name="arrow-left" size=".5rem"/>
    </div>
    <div class="registerTitle">
      <p class="title">悠悠行旅网账号注册</p>
    </div>
    <div class="registerContent">
      <van-form @submit="registerSubmit">
        <van-field
            v-model="username"
            name="username"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="checkPs"
            type="password"
            name="checkPs"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请再次输入密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">注 册</van-button>
        </div>
      </van-form>
    </div>
    <div class="registerFooter">
      登录即代表您同意我们的<a>服务协议</a>和<a>隐私政策</a>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Register",
  data() {
    return {
      username: '',
      password: '',
      checkPs: ''
    }
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    registerSubmit(values) {
      if (values.password !== values.checkPs) {
        Toast({
          message: '两次密码输入不一致',
          position: 'top'
        })
      }
      // console.log('submit',values);
    },
  }
}
</script>

<style scoped>
.register {
  padding: .3rem;
}
.registerHeader {

}
.registerTitle {
  text-align: center;
  margin-top: 50px;
}
.title {
  font-size: 25px;
  color: #333333;
  line-height: 25px;
  font-weight: 400;
}
.registerContent {
  margin-top: 50px;
  background-color: #ffffff;
}
.registerFooter {
  text-align: center;
  margin-top: .3rem;
}
</style>